<!doctype html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" th:href="@{/js/index2.css}">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.css">
    <link rel="stylesheet" href="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/utils.css">

    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }

        .avatars {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
    <title>文章管理</title>
</head>
<body class="hold-transition">
<div id="app" v-cloak>
    <div class="content-header" style="  padding: 10px;
    border-radius: 4px;
    background: white;
    margin-bottom: 10px;
">
        <el-breadcrumb>
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item><a href="/">博客管理</a></el-breadcrumb-item>
            <el-breadcrumb-item>我的博客</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <el-container>
        <el-aside style="width: 100%;background: #ffffff; border-radius: 4px;  ">
            <el-form ref="form" :model="form" label-width="80px" style="align-content: center; margin-top: 45px;">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户名">
                            <el-input v-model="form.username" disabled></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="昵称">
                            <el-input v-model="form.nickname"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col>
                        <el-form-item label="头像">
                            <el-upload
                                    class="avatar-uploader"
                                    action="/image/userAvatarUpload"
                                    name="imgFile"
                                    :show-file-list="false"
                                    :on-success="handleAvatarSuccess"
                                    :before-upload="beforeAvatarUpload">
                                <img v-if="imageUrl" :src="imageUrl" class="avatars">
                                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                            </el-upload>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item label="性别">
                    <el-select v-model="form.sex" placeholder="请选择性别">
                        <el-option label="保密" value="2"></el-option>
                        <el-option label="男" value="1"></el-option>
                        <el-option label="女" value="0"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="form.email"></el-input>
                </el-form-item>
                <el-form-item label="手机号" prop="phone">
                    <el-input v-model="form.phone"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">保存</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-aside>
        <!--  <el-main style="background: #50e09b;width: 50%;">Main</el-main>-->
    </el-container>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!--<script th:src="@{/js/vue.js}"></script>-->
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/axios-0.18.0.js"></script>
<script src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/index.js"></script>
<script type="text/javascript" src="https://yeqian-blog.oss-cn-beijing.aliyuncs.com/js/jquery.min.js"></script>
<script type="text/javascript">
    new Vue({
        el: "#app",
        data: {
            form: {},
            imageUrl: '',
            formLabelWidth: '120px',
        },
        created() {
            this.showData();
        },
        methods: {

            onSubmit() {
                axios.put("/admin", this.form).then((res) => {
                    axios.post("/admin").then((res) => {
                        this.form = res.data.data;
                        this.imageUrl = res.data.data.userAvatar;
                        if (res.data.flag) {
                            this.$message.success("保存成功");
                        }
                    })
                })
            },
            handleAvatarSuccess(response, file) {
                //这里的response相当于我们自己发送的ajax请求的响应中的res.data
                //为模型数据imgUrl赋值，用于页面图片预览
                this.imageUrl = response.data;
                this.$message({
                    type: response.flag ? 'success' : 'error',
                    message: response.message
                });

                //设置模型数据（图片名称），后续提交ajax请求时会提交到后台最终保存到数据库
                this.form.userAvatar = response.data;
            },
            //上传图片之前执行
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;
                if (!isJPG) {
                    this.$message.error('上传套餐图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传套餐图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            showData() {
                axios.post("/admin").then((res) => {
                    this.form = res.data.data;
                    this.imageUrl = res.data.data.userAvatar;
                })
            }
        }
    })
</script>
</body>
</html>